<template>
  <div>
    <div class="kehu">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span>客户列表信息</span>
      <span @click="Xinzen">新增</span>
    </div>
    <van-search
      v-model="value"
      show-action
      placeholder="客户名称/联系方式"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">查询</div>
      </template>
    </van-search>
    <div class="zhiwu">
      <van-empty
        image="search"
        description="未查询到结果"
        v-if="Records.length == 0"
      />
      <ul v-else>
        <li v-for="(item, index) in Records" :key="index">
          <div @click="Shitu(item.id)">
            <p>客户名称 {{ item.custName }}</p>
            <p>联系方式{{ item.telephone }}</p>
            <p>公司名称{{ item.company }}</p>
            <p>职务{{ item.position }}</p>
          </div>

          <div class="toBox">
            <span>新增拜访</span>
            <span>拜访记录</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetCustDate } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      //客户列表信息
      Records: null,
    };
  },
  methods: {
    Xinzen() {
      this.$router.push("/newcustomerinformation");
    },
    onSearch() {},
    onSearch() {
      GetCustDate({ keyword: this.value, current: "1", size: "20" }).then(
        (res) => {
          this.Records = res.data.data.records;
          console.log(66666666);
          console.log("搜索列表信息:", res);
        }
      );
    },
    Shitu(val) {
      console.log(val);
      this.$router.push(`/customerDetails/${val}`);
    },
  },
  created() {
    GetCustDate({ keyword: "", current: "1", size: "60" }).then((res) => {
      this.Records = res.data.data.records;
      console.log("客户列表信息:", res);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.kehu {
  height: 1rem;
  background: #1f3399;
  font-size: 0.14rem;
  display: flex;
  color: white;
  line-height: 1rem;
  span {
    flex: 1;
    text-align: center;
  }
}
.zhiwu {
  font-size: 0.14rem;
  ul {
    /* margin: 0 .1rem; */
    li {
      background: #fff;
      margin-top: 0.15rem;
      padding: 0.15rem 0;
      p {
        padding: 0.02rem 0.1rem;
        height: 0.23rem;
      }
      .toBox {
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: right;
        padding: 0.12rem;
        span {
          background: #003399;
          display: inline-block;
          margin-left: 0.2rem;
          width: 0.8rem;
          color: white;
          text-align: center;
          border-radius: 0.1rem;
        }
      }
    }
  }
}
</style>